<template>
  <view class="index">
    <view class="top">
      <search  />
      <detailSwiper :imgData="imgData"></detailSwiper
    ></view>

    <view class="content">
      <view class="contentImg">
        <image
          src="../../static/img/组件 211 – 1.png"
          class="img"
          @click="changeRoute"
        ></image>
        <text>热门岗位</text></view
      >
      <view class="contentImg">
        <image
          src="../../static/img/组件 212 – 1.png"
          class="img"
          @click="changeRoute"
        ></image>
        <text>热门岗位</text></view
      >
      <view class="contentImg">
        <image
          src="../../static/img/组件 213 – 1.png"
          class="img"
          @click="changeRoute"
        ></image>
        <text>热门岗位</text></view
      >
    </view>
    <detailList :listData="listData"></detailList>
  </view>
</template>

<script>
import search from "../../components/search/search.vue";
import detailList from "../../components/list/detailList.vue";
import detailSwiper from "../../components/swiper/detailSwiper.vue";
import { getBanner, getList } from "../../request/api";
export default {
  components: {
    search,
    detailList,
    detailSwiper,
  },
  mounted() {
    const res = getList().then((res) => {
      console.log(res);
      this.listData = res.data.rows;
      console.log(this.listData);
    });
    const img = getBanner().then((res) => {
      console.log(res);
      this.imgData = res.data.data;
      console.log(this.imgData);
    });
  },
  data() {
    return { isShow: false, listData: [], imgData: [] };
  },
  methods: {
    changeRoute() {
      uni.switchTab({
        url: "/pages/findwork/findwork",
      });
    },
  },
};
</script>

<style>
.index {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #8c8aff 0.0001%, #e3eceb);
}
.top {
  /* height: 350px; */
  margin-bottom: 20px;
}
.content {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
.contentImg {
  display: flex;
  flex-direction: column;
}
.img {
  /* margin-left: 20px;
	margin-right: 40px; */
  align-items: center;

  width: 70px;
  height: 70px;
}

.image {
  width: 750rpx;
}
</style>
